<template>
  <div class="main">
    <div class="title">角色管理</div>
    <div class="headerInput">
      <a-form layout="inline" style="width:100%">
        <a-form-item label="Find" class="searchInputBox">
          <a-input placeholder v-model.trim="searchText" allowClear />
        </a-form-item>
        <a-form-item class="ml300">
          <a-button type="primary" @click="search">Search</a-button>
        </a-form-item>
        <a-form-item class="ml50">
          <a-button type="primary" @click="add">Add</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="tableSection">
      <a-table :data-source="tableData" :customRow="clickKindTable" :pagination="false">
        <a-table-column key="RoleName" title="RoleName" data-index="RoleName" />
        <a-table-column key="RoleDescription" title="RoleDescription" data-index="RoleDescription" />

        <a-table-column key="action" title="Action">
          <template slot-scope="text, record">
            <div class="fsc">
              <a-button type="primary" @click="editMoudule(text,record)">Edit</a-button>
              <a-button type="primary" @click="AuthMoudule(text,record)">Authority</a-button>
              <a-button type="primary" @click="delMoudule(text,record)">Delete</a-button>
            </div>
          </template>
        </a-table-column>
      </a-table>

      <a-pagination
        v-model="currentPage"
        show-size-changer
        show-quick-jumper
        :page-size.sync="pageSize"
        :total="totalCount"
        @showSizeChange="changePage"
        @change="changePage"
        class="pagination"
      />
    </div>

    <!-- 弹窗 -->
    <a-modal v-model="roleModalVisiable" title="Role Manage" @ok="saveRoleAuth">
      <div>
        <div class="selectRoleName">{{ selectRoleName }}</div>
        <div>
          <RoleAuthTree
            :treeData="treeData"
            @roleAuthCheckKeys="roleAuthCheckKeys"
            :defaultCheckedKeys="SelectList"
          ></RoleAuthTree>
        </div>
      </div>
    </a-modal>
    <a-modal v-model="modalVisiable" @ok="handleOk" :maskClosable="false" :title="ModalTitle">
      <div>
        <a-form class="mc0" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="RoleName">
            <a-input placeholder v-model.trim="RoleName" allowClear />
          </a-form-item>
          <a-form-item label="Description">
            <a-input placeholder v-model="RoleDescription" allowClear />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
import RoleAuthTree from '@/components/tree/RoleAuthTree'
export default {
  data() {
    return {
      searchText: '',
      tableData: [],
      modalVisiable: false,
      selectRoleName: '',
      roleModalVisiable: false,
      RoleId: '',
      RoleName: '',
      RoleDescription: '',
      ModalTitle: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      totalCount: 0,
      currentPage: 1,
      pageSize: 20,
      treeData: [],
      SelectList: [],
      rolecheckKeys: [],
    }
  },
  components: {
    RoleAuthTree,
  },
  watch: {
    searchText() {
      this.debounce()
    },
  },
  created() {
    this.getTableData()
  },
  methods: {
    debounce() {
      setTimeout(() => {
        this.getTableData()
      }, 800)
    },
    roleAuthCheckKeys(e) {
      this.rolecheckKeys = e
    },
    // 查询
    getTableData() {
      const data = this.searchText
        ? {
            RoleName: this.searchText ? '%' + this.searchText + '%' : '',
            RoleDescription: this.searchText ? '%' + this.searchText + '%' : '',
          }
        : {}
      const a = {
        method: 'SysRole_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.currentPage,
        queMode: 'OR',
        limit: this.pageSize,
        orderByList: 'RoleName',
        datas: data,
      }
      this.$post(a).then((result) => {
        if (result.data.length > 0) {
          this.totalCount = result.count
          this.tableData = result.data
        } else {
          this.tableData = []
        }
      })
    },
    search() {
      this.currentPage = 1
      this.getTableData()
    },
    add() {
      this.doType = 'add'
      this.ModalTitle = 'Add Roles'
      // 清空参数
      this.CreateBy = ''
      this.CreateTime = ''
      this.Email = ''
      this.IsSME = ''
      this.NTID = ''
      this.Phone = ''
      this.Role = ''
      this.RoleId = ''
      this.UserName = ''
      this.RoleName = ''
      this.RoleDescription = ''
      this.modalVisiable = true
    },
    clickKindTable(record, index) {
      return {
        on: {
          click: () => {},
        },
      }
    },
    // 编辑模组
    editMoudule(item, index) {
      this.doType = 'edit'
      this.ModuleTipIndex = index
      this.ModalTitle = 'Edit Roles'
      this.RoleDescription = item.RoleDescription
      this.RoleId = item.RoleId
      this.RoleName = item.RoleName
      this.selectRoleName = item.RoleName
      this.modalVisiable = true
      console.log('item :>> ', item)
    },
    //删除模组
    delMoudule(item, index) {
      console.log(item, 'del')
      this.doType = 'del'
      const that = this
      const a = {
        method: 'SysRole_Del',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          RoleId: item.RoleId,
        },
      }

      this.$confirm({
        title: 'warm prompt',
        content: 'Do you want to Delete this data?',
        onOk() {
          that.$post(a).then((result) => {
            if (result.code == 0) {
              that.$message.success('successfully delete!')
              that.getTableData()
            }
          })
        },
      })
    },
    AuthMoudule(item) {
      this.RoleId = item.RoleId
      this.selectRoleName = item.RoleName
      this.roleModalVisiable = true
      this.getRoleAuthInfo(item)
    },
    getRoleAuthInfo(item) {
      const that = this
      const a = {
        method: 'SysRoleAuthority_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          RoleId: this.RoleId,
        },
      }
      this.$post(a).then((result) => {
        this.treeData = result.data.sysMenu
        this.$nextTick(() => {
          that.SelectList = result.SelectList
        })
      })
    },
    addInfo() {
      const a = {
        method: 'SysRole_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          RoleName: this.RoleName,
          RoleDescription: this.RoleDescription,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('Add successfully!')
          this.getTableData()
        }
      })
    },
    editInfo() {
      const a = {
        method: 'SysRole_Mod',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          RoleId: this.RoleId,
          RoleName: this.RoleName,
          RoleDescription: this.RoleDescription,
        },
      }
      this.$post(a).then((result) => {
        // console.log(result, '修改完成')
        if (result.code == 0) {
          this.$message.success('updated successfully!')
          this.getTableData()
        }
      })
    },
    handleOk() {
      if (!this.RoleName) {
        this.$message.warn('Please enter the RoleName')
        return
      } else if (!this.RoleDescription) {
        this.$message.warn('Please enter the RoleDescription')
        return
      }
      if (this.doType === 'add') {
        this.addInfo()
      } else if (this.doType === 'edit') {
        this.editInfo()
      }
      this.modalVisiable = false
    },
    changePage(current, pageSize) {
      this.currentPage = current
      this.pageSize = pageSize
      this.getTableData()
    },
    saveRoleAuth() {
      const a = {
        method: 'SysRoleAuthority_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          RoleId: this.RoleId,
          SelectList: this.rolecheckKeys,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('updated successfully!')
          this.getRoleAuthInfo()
        }
        this.roleModalVisiable = false
      })
    },
  },
}
</script>

<style lang="less" scoped>
.selectRoleName {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
}
.fsc {
  display: flex;
  justify-content: space-between;
  width: 300px;
}
.mc0 {
  margin-left: 50px;
}
.main {
}
.headerInput {
  display: flex;
  width: 100%;
  align-items: center;
  .searchInputBox {
    input {
      width: 280px;
    }
  }
  .ml300 {
    margin-left: 180px;
  }
  .ml50 {
    margin-left: 28px;
  }
}
.tableSection {
  margin-top: 30px;
}

.pagination {
  margin-top: 38px;
  position: absolute;
  right: 100px;
}
.app {
  background: white;
}
</style>